<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 200px;
            top: 150px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var divele = document.querySelector('div');
        // function move(ele, type, target, t = 50) {
        //     let init = 0; //定义一个初始值  
        //     const timer = setInterval(() => {
        //         init += 5;
        //         ele.style[type] = `${init}px`;
        //         if (init >= target) clearInterval(timer)
        //     }, t)

        // }
        // 原div left 200px 
        // 一旦执行上面的函数   先把0 给到div的left 于是 div 先归零 然后再过渡到500 
        // 如何解决  

        // 把初始值 init 不再从0开始了 而是从元素原始的位置开始运动 

        function move(ele, type, target, t=50) {
            // window.getComputedStyle(ele)[type] 得到是字符串  200px
            // 我们只想要200 

            let init = parseInt(window.getComputedStyle(ele)[type])// 获取元素原始的位置
            const timer = setInterval(() => {
                init += 5;
                ele.style[type] = `${init}px`;
                if (init >= target) clearInterval(timer)
            }, t)

        }

        divele.onclick = function () {
            move(this, 'left', 500)
        }
    </script>
</body>

</html>